<template>
  <section>
    <el-col :span="24"
      class="toolbar"
      style="text-align: center;">
      <el-form :inline="true"
        :model="filters">
        <el-form-item label="用户ID">
          <el-input v-model="filters.appCode"
            placeholder="查询此应用下的所有服务"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
            @click="getSv">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-table :data="allApiTable"
      highlight-current-row
      v-loading="listLoading"
      style="width: 95%;margin:auto;">
      <el-table-column prop="appCode"
        label="应用标识">
      </el-table-column>
      <el-table-column prop="apiCode"
        label="服务标识">
      </el-table-column>
      <el-table-column prop="apiName"
        label="服务名称">
      </el-table-column>
      <el-table-column prop="originalUri"
        label="网关访问路径">
      </el-table-column>
      <el-table-column label="操作"
        width="150">
        <template slot-scope="scope">
          <el-button type="primary"
            @click="apply(scope.row)"
            round>申请</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next"
      v-if="pageTotal3>10"
      @current-change="handleCurrentChange"
      style="margin:10px;text-align: center;"
      :total="pageTotal3">
    </el-pagination>
    <el-dialog title="申请信息"
      :visible.sync="applyVisible"
      :close-on-click-modal="false"
      class="add-service">
      <label>应用名称：</label>
      <el-select v-model="appCode"
        placeholder="请选择"
        @change="selectAppName">
        <el-option v-for="item in allt"
          :key="item.appCode"
          :label="item.appName"
          :value="item.appCode">
        </el-option>
      </el-select>
      <label style="margin-left:20px;">应用code：</label>
      <span>{{appCode}}</span>
      <div style="margin-top:50px;">
        <el-button type="primary"
          @click="subscribe">订阅服务</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { getService, applyService, selectAllAppCode } from "@/api/allApi"; // 引入相应API

export default {
  data() {
    return {
      filters: {
        appCode: ""
      },
      searchCode:'',
      allt: [],
      pageTotal3: 10,
      page: 1,
      listLoading: false,
      addLoading: false,
      applyVisible: false,
      appCode: "",
      apiCode: "",
      allApiTable: []
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.page = val;
      let params = {
        appCode: this.searchCode,
        currentPage: this.page,
        pageSize: 10,
        type: "2"
      };
      this.getSvtable(params);
    },
    getSv() {
      let para = {
        appCode: this.filters.appCode,
        currentPage: 1,
        pageSize: 10,
        type: "2"
      };
      this.getSvtable(para);
      this.searchCode = this.filters.appCode;
    },
    apply(row) {
      this.apiCode = row.apiCode;
      selectAllAppCode().then(res => {
        if (res.data.code === "0") {
          this.allt = res.data.data;
        } else {
          this.$message({
            message: `[${res.data.desc}]:获取失败`,
            type: "error"
          });
        }
      });
      this.applyVisible = true;
    },
    selectAppName(value) {
      this.appCode = value;
    },
    subscribe() {
      let params = {
        apiCode: this.apiCode,
        appCode: this.appCode
      };
      applyService(params).then(res => {
        if (res.data.code === "0") {
          this.$msgbox({
            title: "提示",
            message: "订阅成功！",
            callback: () => {
              location.reload();
            }
          });
        } else {
          this.$message.error(res.data.desc);
        }
      });
    },
    getAllServiceInfo() {
      this.listLoading = true;
      let params = {
        currentPage: 1,
        pageSize: 10,
        type: "2"
      };
      this.getSvtable(params);
    },
    getSvtable(param) {
      this.listLoading = true;
      getService(param).then(res => {
        if (res.data.code === "0") {
          this.pageTotal3 = res.data.data.pageTotal;
          this.allApiTable = res.data.data.pageData;
        } else {
          this.$message({
            message: `[${res.data.desc}]:查询失败`,
            type: "error"
          });
        }
        this.listLoading = false;
      });
    }
  },
  mounted() {
    this.getAllServiceInfo();
  }
};
</script>
